<template>
	<view>
		<view style="width: 100%;padding-bottom: 140rpx;">
			<view style="display: flex;flex-direction: column;" v-for="(item,index) in ListItem">
				<view style="margin-top: 15rpx;width: 100%;text-align: center;font-size: 26rpx;color: #999999;">
					{{item.localTime}}
				</view>

				<view v-if="item.sendId === userId"
					style="width: 83%;margin-left: 15%;margin-bottom:10rpx;margin-top:10rpx;">
					<view class="chat-listitem" style="float: right;">
						<view @longpress="copy(item.msg)" class="chat-listitem-text" style="margin-right: 20rpx;">
							{{item.msg}}
						</view>
						<view>
							<image :src="sendUser.avr" class="chat-listitem-image"></image>
						</view>
					</view>					
				</view>
				<view v-if="item.sendId != userId" style="width: 83%;margin-right: 15%;">				
					<view class="chat-listitem" style="float: left;margin-left: 10rpx;">
						<view>
							<image :src="acceptUser.avr" class="chat-listitem-image"></image>
						</view>
						<view class="chat-listitem-text" style="margin-left: 20rpx;">{{item.msg}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部聊天输入框 -->
		<view class="input-box padding-tb">
			<view class="justify-between padding-lr"
				style="display: flex;margin-top: 15rpx;width: 100%;background-color: #1c1b20;padding-top: 14upx;">
				<input confirm-type="send" @confirm='setChatSave' type="text" v-model="content"
					style="width: 72%;height: 70rpx;background: #3B3D55;margin: 4rpx 10rpx;border-radius: 70rpx;padding-left: 10rpx;" />
				<view class="save" @tap='setChatSave'>发送</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ListItem: [],
				userId: 1,
				acceptId:0,
				content: "",
				acceptUser: {

				},
				sendUser: {

				}
			}
		},
		onLoad(option) {
			console.log(option.id);
			this.acceptId=option.id;
			
			this.getData();
		},
		methods: {
			websockets() {
				//连接
				uni.connectSocket({
					url: 'ws://127.0.0.1:8010/db/imserver/1'
				});
				//打开websocket回调
				uni.onSocketOpen(function(res) {
					console.log('WebSocket连接已打开！');
				});
				//连接失败回调
				uni.onSocketError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
					uni.showToast({
						title: 'WebSocket连接打开失败，请检查！',
						icon: 'none'
					})
				});
				//服务端过来内容之后打印
				uni.onSocketMessage(function(res) {
					console.log('收到服务器内容：' + res.data);
					console.log('收到服务器内容：' + JSON.parse(res.data).msg);
				});
				//关闭websocket打印
				uni.onSocketClose(function(res) {
					console.log('WebSocket 已关闭！');
					uni.showToast({
						title: 'WebSocket 已关闭！',
						icon: 'none'
					})
				});
			},
			getData() {
				console.log(this.userId);
				console.log(this.acceptId);
				this.$myRequest({
					url: "/chat/showChatRecord/"+this.userId+"/"+this.acceptId,
				}).then(r => {
					this.ListItem = r.data.data.chatList;
					this.acceptUser = r.data.data.acceptUser;
					this.sendUser = r.data.data.sendUser;
					console.log(r.data.data);
				})
			},
			setChatSave() {
				//type:1文字 2图片
				console.log(this.content);
				if (this.content == '') {
					uni.showToast({
						title: "请输入聊天内容",
						icon:"none"
					})
					return;
				}
				let data = {
					sendId: 1,
					acceptId: 2,
					msg: this.content,
				}
				data = JSON.stringify(data);
				let that = this;
				uni.sendSocketMessage({
					data: data,
					success(res) {
						let data = {
							msg: that.content,
							sendId: sendId
						}
						that.ListItem.push(data);
						setTimeout(() => {
							that.getTimeOrListItem1();
						}, 50);
						console.log(that.content);
					},
					fail(err) {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style>
	.input-box {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 120rpx;
		width: 100%;
		display: flex;
		box-sizing: content-box;
		z-index: 999;
		/* background-color: #ececec; */
		padding: 0 5rpx;
	}

	.chat-listitem {
		display: flex;
		margin-top: 20rpx;
		padding: 10rpx;
	}

	.chat-listitem-text {
		color: #ececec;
		background: #1E1F31;
		margin-top: 10rpx;
		width: fit-content;
		padding: 15rpx;
		font-size: 30rpx;
		height: max-content;
		word-wrap: break-word;
		word-break: break-all;
		border-radius: 10rpx;
	}
	.chat-listitem-image {
		margin-top: 5rpx;
		width: 75rpx;
		height: 75rpx;
		border-radius: 5rpx;
	}
	.save {
		width: 130rpx;
		text-align: center;
		border-radius: 70rpx;
		height: 70rpx;
		color: #FFF;
		background: #1789FD;
		margin: 5rpx 10rpx 0;
		line-height: 70rpx;
	}
</style>
